<template>
  <!-- 潜力合作 -->
  <div>
    <ul v-if="tableData.length>0" class="table-box">
      <li v-for="(item, index) in tableData" :key="index">
        <div class="info1">
          <div class="box">
            <div class="logo">
              <img :title="searchText" class="src-img" v-if="item.srcImg === ''" src="@/assets/img/default.png" alt="">
              <img :title="searchText" class="src-img" v-else :src="item.srcImg" alt="">
            </div>
            <h4 @click="goDetail(searchText)">{{searchText}}</h4>
          </div>
          <div class="box">
            <div class="logo">
              <img :title="item.name" class="target-img" v-if="item.targetImg === ''" src="@/assets/img/default.png" alt="">
              <img :title="item.name" class="target-img" v-else :src="item.targetImg" alt="">
            </div>
            <h4 @click="goDetail(item.name)">{{item.name}}</h4>
          </div>
        </div>
        <el-table
          :data="[item]"
          class="eltable"
          @row-click="handdle"
          :header-cell-style="headerCellStyle"
          style="width: 100%">
          <el-table-column
            label="涉及专利数量">
            <template slot-scope="scope">
              <p>{{scope.row.allCount}}</p>
            </template>
          </el-table-column>
          <el-table-column
            label="产业类别">
            <template slot-scope="scope">
              <p class="tags">
                <span v-for="(ite, j) in scope.row.labels" :key="j" :title="ite.full">{{ite.short}}</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column
            label="匹配度">
            <template slot-scope="scope">{{Math.ceil(scope.row.score)}}</template>
          </el-table-column>
        </el-table>
      </li>
    </ul>
    <p v-if="tableData.length<=0" class="no-data"><i v-show="noDataStr!=='暂无数据'" class="el-icon-loading"></i>{{noDataStr}}</p>
    <v-dialog-pn ref="DialogPartentDetail"></v-dialog-pn>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import vDialogPn from '@/views/components/v-dialog-pn'
var jwt = require('jsonwebtoken')
export default {
  props: {
    activeName: {
      type: String
    },
    searchText: {
      type: String
    },
    ndata: {
      type: Array
    },
    noDataStr: {
      type: String
    }
  },
  data() {
    return {
      tableData: [],
      ipi: 1,
      ips: 10,
      total: 0,
    }
  },
  computed:{
    ...mapState(['levelCode','levelName'])
  },
  components: {
    vDialogPn
  },
  methods: {
    init() {
      this.tableData = JSON.parse(JSON.stringify(this.ndata))
    },
    getImg(companyName, func) {
      let promise = new Promise((resolve, reject) => {
        this.$post(this.$Url.search.companyList, {
          name: companyName,
          ipi: 1,
          ips: 1
        }).then(res => {
          let data = res.data
          if (data) {
            let eid = data.result && data.result[0]._id
            resolve(eid)
          }
        }).catch(err => {})
      })
      promise.then((eid) => {
        this.$get(this.$Url.search.companyLogo, {
          eid: eid
        }).then(res => {
          let data = res.data
          if (data) {
            return func(data)
          }
        }).catch(err => {})
      })
    },
    // 分页
    handleCurrentChange(val){
      this.ipi = val
      // this.getTableData()
    },
    headerCellStyle() {
      return {
        'font-weight': 'normal',
        'color': '#86899e',
        'background-color': '#f3f6f9'
      }
    },
    goDetail(name) {
      // 判断是企业还是机构
      let p1 = new Promise((resolve, reject) => {
        this.$get(this.$Url.production.getTypeByName, {
          name
        }).then(res => {
          let data = res.data || ''
          let isCompany = false
          if (data.length > 0) {
            data === '企业' ? isCompany = true : isCompany = false
          }
          resolve(isCompany)
        })
      })
    
      p1.then(res => {
        let isCompany = res
        if (isCompany === true) { // 如果是企业，则跳转到企业详情
          this.$Bus.$emit("progressBar", name)
        } else { // 如果是非企业，则跳转到机构详情
          // 获取companyId
          let p2 = new Promise((resolve, reject) => {
            this.$get(this.$Url.company.getCompanyId, {
              keyWord: name
            }).then((res) => {
              let data = res.data
              let eid = ''
              if(data){
                eid = data.result[0]._id
              }
              resolve(eid)
            })
          })

          // 获取专利数量
          let p3 = new Promise((resolve, reject) => {
            this.$get(this.$Url.production.getPatentCountByName, {
              name: name
            }).then(res => {
              let data = res.data
              let doc_count = 0
              if (data) {
                doc_count = data
              }
              resolve(doc_count)
            })
          })

          Promise.all([p2, p3]).then(res => {
            this.$router.push({
              name: 'SynergyInsDetails',
              query: {
                name,
                eid: res[0],
                doc_count: res[1],
                isCompany: isCompany
              }
            })
          })

        }
      })
    },
    // 表格行点击
    handdle(row){
      if(row.pns) this.$refs.DialogPartentDetail.init(row.pns)
    },
    // goDetail(name){
    //   this.$Bus.$emit("progressBar", name)
    // },
    // getTableData() {
    //   let token = this.$cookie.get("token")
    //   let userName = jwt.decode(token).sub
    //   this.$post(this.$Url.production.Match_up, {
    //     user: userName,
    //     company: '江苏天奈科技股份有限公司',
    //     an1tpe: '',
    //     province: '江苏省',
    //     city: this.levelName
    //   }).then(res => {

    //   }).catch(err => {})
    //   return
    //   let tableData = JSON.parse(JSON.stringify(this.ndata.slice((this.ipi-1)*this.ips,this.ipi*this.ips)))
    //   this.tableData = []
    //   for (let i in tableData) {
    //     let obj = {
    //       info: tableData[i].info,
    //       srcImg: '',
    //       targetImg: '',
    //       company: [tableData[i].src, tableData[i].target],
    //       results: tableData[i].ipc_kind,
    //       time: tableData[i].ad,
    //       duration: '',
    //       patentNum: tableData[i].count,
    //       status: '已合作'
    //     }
    //     this.tableData.push(obj)
    //     this.getImg(tableData[i].src, (imgData) => {
    //       this.$set(this.tableData[i], 'srcImg', imgData)
    //     })
    //     this.getImg(tableData[i].target, (imgData) => {
    //       this.$set(this.tableData[i], 'targetImg', imgData)
    //     })
    //   }
    // },
    // getImg(companyName, func) {
    //   let promise = new Promise((resolve, reject) => {
    //     this.$post(this.$Url.search.companyList, {
    //       name: companyName,
    //       ipi: 1,
    //       ips: 1
    //     }).then(res => {
    //       let data = res.data
    //       if (data) {
    //         let eid = data.result && data.result[0]._id
    //         resolve(eid)
    //       }
    //     }).catch(err => {})
    //   })
    //   promise.then((eid) => {
    //     this.$get(this.$Url.search.companyLogo, {
    //       eid: eid
    //     }).then(res => {
    //       let data = res.data
    //       if (data) {
    //         return func(data)
    //       }
    //     }).catch(err => {})
    //   })
    // },
    // // 分页
    // handleCurrentChange(val){
    //   this.ipi = val
    //   this.getTableData()
    // },
    // headerCellStyle() {
    //   return {
    //     'font-weight': 'normal',
    //     'color': '#86899e',
    //     'background-color': '#f3f6f9'
    //   }
    // }
  },
  watch: {
    ndata() {
      if (this.activeName === 'second') {
        let ndata = JSON.parse(JSON.stringify(this.ndata))
        ndata.forEach(v => {
          // 涉及专利数量
          let allCount = 0
          // 产业类别
          let labels = []
          if (v.fields) {
            v.fields.forEach(b => {
              allCount += b.primary_count
              let newName = b.name
              if (newName.length > 5) {
                newName = newName.substr(0, 4) + '...'
              }
              labels.push({
                short: `${newName}(${b.primary_count})`,
                full: `${b.name}(${b.primary_count})`
              })
            })
          }
          
          v.allCount = allCount
          v.labels = labels

          v.srcImg = ''
          v.targetImg = ''
          this.getImg(this.searchText, (imgData) => {
            this.$set(v, 'srcImg', imgData)
          })
          this.getImg(v.name, (imgData) => {
            this.$set(v, 'targetImg', imgData)
          })
        })

        this.tableData = ndata
      }
      
      // if (this.ndata.length > 0) {
      //   this.total = this.ndata.length
      //   this.getTableData()
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.table-box {
  li {
    margin-bottom: 10px;
  }
}
.info1 {
  position: relative;
  display: flex;
  .box {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 60px;
    margin: 10px 0 15px;
    .logo {
      position: absolute;
      top: 0;
      left: 4px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      img {
        display: block;
        width: 60px;
        height: 60px;
        border: 4px solid #fff;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      }
    }
    h4 {
      position: relative;
      display: inline-block;
      line-height: 60px;
      padding-left: 80px;
      padding-right: 20px;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }
  }
}
.tags {
  position: relative;
  span {
    display: inline-block;
    width: 100px;
    line-height: 24px;
    padding: 0 10px;
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 4px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    background-color: $mainColor;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
// .eltable {
//   font-size: 14px;
//   color: #4f515b;
//   .company-box {
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     .icon-box {
//       position: relative;
//       padding-left: 10px;
//       padding-right: 60px;
//       img {
//         display: block;
//         width: 60px;
//         height: 60px;
//         border: 4px solid #fff;
//         border-radius: 50%;
//         box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
//         &.target-img {
//           position: absolute;
//           top: 0;
//           right: 20px;
//         }
//       }
//     }
//     .names {
//       flex: 1;
//       font-size: 16px;
//       font-weight: bold;
//       span {
//         display: block;
//         width: 100%;
//       }
//     }
//   }
//   .results {
//     font-weight: bold;
//     color: #504da6;
//   }
//   .status {
//     display: inline-block;
//     padding: 4px 16px;
//     border-radius: 18px;
//     font-weight: bold;
//     color: #504da6;
//     background-color: #edeafc;
//   }
// }
</style>